<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            overflow: hidden;
            background: url('img/bg.png') no-repeat 0 0/100% 100%;
        }
        .box{
            width: 500px;
            height: 300px;
            box-shadow: 0 0 25px 0 rgba(255,255,255,0.4);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .item{
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            position: absolute;
            background: url('img/bg.png') no-repeat  0 0/100% 100%;
            filter:blur(10px);
        }
    </style>
</head>
<body>

<div class="box">
    <div class="item"></div>
</div>


<script>
    let box = document.querySelector('.box');
    let item = box.querySelector('.item');


    box.onmousedown = function(){

    }

    let startPoint = 0; //手指摁下时手指的位置
    let start = {
        x:0,
        y:0
    }; //手指摁下时元素的位置
    let trans = {
        x:0,
        y:0
    }; //手指移动的距离
    let nowPoint = {
        x:0,
        y:0
    };

    box.addEventListener('mousedown',function(ev){
        let touch = ev;
        startPoint = {
            x:touch.clientX,
            y:touch.clientY
        }
        start = nowPoint;

        box.onmousemove = function(ev){
            let touch = ev;
            trans = {
                x:touch.clientX - startPoint.x,
                y:touch.clientY - startPoint.y
            }
            nowPoint = {
                x:start.x + trans.x,
                y:start.y + trans.y
            };
            box.style.transform = `translate(${nowPoint.x}px,${nowPoint.y}px)`;
            item.style.transform = `translate(-${nowPoint.x}px,-${nowPoint.y}px)`;
        };

        box.onmouseup = function(){
            box.onmousemove = null;
        }
    });


</script>
</body>
</html>